<!--
 * @Description: 图标选择器
 * @Author: Ag
 * @LastEditors: Ag
 * @LastEditTime: 2024-02-05 16:03:41
 * Copyright (c) 2023 by CIGLINK, All Rights Reserved. 
-->
<template>
  <n-popover ref="$popover" trigger="click" placement="bottom-start">
    <template #trigger>
      <n-button text color-hex-888>
        <template #icon>
          <CustomIcon :icon="props.value || 'clarity-add-line'" :type="props.value ? 'custom' : 'iconify'" :size="18" />
        </template>
        <span text-12>点击选择</span>
      </n-button>
    </template>

    <span>
      <n-input v-model:value="queryValue" placeholder="输入图标名称检索" clearable>
        <template #suffix>
          <span flex items-center m-l-8>
            <CustomIcon icon="ic-sharp-search" :size="18" />
          </span>
        </template>
      </n-input>

      <n-scrollbar w-320 h-150 m-t-8>
        <n-grid :x-gap="5" :y-gap="5" :cols="3">
          <n-grid-item
            v-for="icon in iconList"
            :key="icon"
            flex
            items-center
            color-hex-555
            hover:bg-hex-f5f6fb
            cursor-pointer
            @click="handleSelect(icon)"
          >
            <span w-full p-x-2 flex items-center>
              <CustomIcon :icon="icon" :size="16" />
              <n-ellipsis m-l-5>{{ icon }}</n-ellipsis>
            </span>
          </n-grid-item>
        </n-grid>
      </n-scrollbar>
    </span>
  </n-popover>
</template>

<script setup lang="ts">
import icons from './requireIcons'
import type { PopoverInst } from 'naive-ui'

const props = defineProps({
  value: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:value'])

const queryValue = ref('')

const iconList = computed(() => {
  return queryValue.value ? icons.filter((keyword) => keyword.includes(queryValue.value)) : icons
})

const $popover = ref<PopoverInst | null>(null)

function handleSelect(icon: string) {
  emit('update:value', icon)
  $popover.value?.setShow(false)
}
</script>
